<template>
  <div class="footerNav">
    <van-tabbar route v-model="active" @change="handleChange" :border="false">
      <van-tabbar-item replace to="/exchange">
        <span>PT闪兑</span>
        <template #icon="props">
          <img :src="props.active ? icons[3].active : icons[3].inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/trade">
        <span>PLAY交易挖矿</span>
        <template #icon="props">
          <img :src="props.active ? icons[0].active : icons[0].inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/destroy">
        <span>销毁挖矿</span>
        <template #icon="props">
          <img :src="props.active ? icons[1].active : icons[1].inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/more">
        <span>更多</span>
        <template #icon="props">
          <img :src="props.active ? icons[2].active : icons[2].inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { ref } from 'vue'

import icon1 from '../../src/assets/img/nav/icon_deal_select@2x.png'
import icon2 from '../../src/assets/img/nav/icon_deal_unselected@2x.png'

import icon7 from '../../src/assets/img/nav/icon_pt_select@2x.png'
import icon8 from '../../src/assets/img/nav/icon_pt_unselected@2x.png'
import icon3 from '../../src/assets/img/nav/icon_mining_select@2x.png'
import icon4 from '../../src/assets/img/nav/icon_mining_unselected@2x.png'
import icon5 from '../../src/assets/img/nav/icon_more_select@2x.png'
import icon6 from '../../src/assets/img/nav/icon_more_unselected@2x.png'

export default {
  name: 'footerNav',
  setup() {
    const active = ref(0)
    const icons = [
      {
        active: icon1,
        inactive: icon2,
      },
      {
        active: icon3,
        inactive: icon4,
      },
      {
        active: icon5,
        inactive: icon6,
      },
      {
        active: icon7,
        inactive: icon8,
      },
    ]
    return {
      icons,
      active,
    }
  },
  data() {
    return {}
  },
  methods: {
    handleChange: function () {},
  },
}
</script>
<style lang="less" scoped>
.footerNav {
  .van-tabbar {
    height: 65px;
    background: none;
  }

  .van-tabbar-item {
    background-color: #181818;
  }

  img {
    height: 26px;
    width: 26px;
  }

  .van-tabbar-item__icon {
    margin-bottom: 5px;
  }
}
</style>
